<template>
  <view class="cohabitantList">
    <view class="cardItem" v-for="(item,index) in newCohabitantDTOList" :key="index">
      <!-- <view class="head">				
				<view style="font-size: 40upx; color: #000;font-weight:5upx;font-family:Alibaba PuHuiTi; letter-spacing: 9upx;">入住登录信息</view>
				<view style="font-size: 16upx;padding-top: 10upx;">CHECK-IN AND LOGIN INFORMATION</view>
      </view>-->
      <view class="name">
        <text>姓 名：</text>
        {{item.cohabitantName}}
      </view>
      <view class="phone">手机号码：{{item.cohabitantPhoneNumber}}</view>
      <button class="editRemove" @click="addPerson">编辑</button>
    </view>
    <button class="addPerson" @click="addPerson">
      <image src="../../static/img/air-jia.png" mode />添加同住人
    </button>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      item: "",
      newCohabitantDTOList: [
        {
          cohabitantName: "",
          cohabitantOrderId: "",
          cohabitantPhoneNumber: "",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      user: "user",
    }),
  },

  methods: {
    getPerson() {
      uni.showLoading({
        title: "提交中",
        mask: true,
      });
      this.$http
        .post(
          "/app/findCohabitant",
          this.$qs.stringify({
            phoneNumber: this.user,
            orderNumber: this.item.orderNumber,
          }),
          {
            header: {} /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          uni.hideLoading();
          let data = res.data;
          if (data.code == 0) {
            let arr = data.data.map((item) => {
              return {
                cohabitantName: item.customName,
                cohabitantOrderId: item.orderId,
                cohabitantPhoneNumber: item.customPhoneNumber,
              };
            });
            if (arr.length > 0) {
              this.newCohabitantDTOList = arr;
            } else {
              this.newCohabitantDTOList = [
                {
                  cohabitantName: "",
                  cohabitantOrderId: "",
                  cohabitantPhoneNumber: "",
                },
              ];
            }
          } else {
            uni.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
              mask: true,
            });
          }
        })
        .catch((err) => {});
    },
    addPerson() {
      uni.navigateTo({
        url: "/pages/addperson/add",
      });
    },
    handleRemove(index) {
      this.newCohabitantDTOList.splice(index, 1);
      this.$http
        .post(
          "/app/insertCohabitant",
          {
            currentPhone: this.user,
            orderNumber: this.item.orderNumber,
            newCohabitantDTOList: this.newCohabitantDTOList,
          },
          {
            header: {
              "Content-Type": "application/json;charset=UTF-8",
            } /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          console.log(res);
          let data = res.data;
          if (data.code == 0) {
            console.log(data.data);
            uni.showToast({
              image: "/static/img/success.png",
              title: "添加成功",
              duration: 2000,
            });
            // uni.navigateBack();
            this.getPerson();
          } else {
            uni.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
            });
          }
        })
        .catch((err) => {});
    },
  },
  onLoad(item) {
    this.item = uni.getStorageSync("person");
    this.getPerson();
  },
};
</script>

<style lang="scss">
.cohabitantList {
  background: #fff;
  height: 100%;
  padding-top: 20upx;
}
.cohabitantList .cardItem {
  border-radius: 16rpx;
  background: white;
  box-shadow: -2px 2px 5px 2px #f2f2f2, 2px -2px 5px 0px #f2f2f2;
  padding: 30rpx 0rpx;
  margin: 20upx 24upx 10upx;
  position: relative;
}
// .cohabitantList .cardItem .head{
// 	height: 80upx;
// 	background: url("../../static/img/guohui.png") no-repeat left center;
// 	background-size: 80upx 80upx;
// 	color: #000;
// 	padding-left: 100upx;
// 	margin-left: 50upx;
// }
.cohabitantList .cardItem .name {
  padding-left: 70upx;
  padding-top: 16upx;
}
.cohabitantList .cardItem .name text {
  letter-spacing: 25upx;
}
.cohabitantList .cardItem .phone {
  padding-left: 70upx;
  padding-top: 10upx;
}
.cohabitantList .addPerson {
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  background: rgba(100, 132, 241, 1);
  border-radius: 32upx;
  margin-left: 100upx;
  margin-right: 100upx;
  font-size: 26upx;
  margin-top: 40upx;
  position: relative;
}
.cohabitantList .addPerson image {
  width: 26upx;
  height: 26upx;
  margin-right: 10upx;
  position: absolute;
  left: 180upx;
  top: 20upx;
}

.cohabitantList .editRemove {
  width: 120upx;
  height: 50upx;
  color: #000;
  text-align: center;
  position: absolute;
  right: 50upx;
  top: 70upx;
  background: #fff;
  font-size: 20upx;
  letter-spacing: 6upx;
  padding-left: 5upx;
  padding-right: 5upx;
}
.cohabitantList .editRemove:nth-of-type(2) {
  top: 120upx;
}
</style>
